<template>
  <div class="xcontain">
     <div class="img">
    <img :src="articleDetail.imgSrc">
  </div>
 <div class="content">
  <div class="header">
    <img :src="articleDetail.avatar">  知乎 
    <text>发表于  {{articleDetail.date}}</text>
  </div>
  <div class="title">{{articleDetail.content}}</div>
  <div class="icon">
    
  </div>
  <div class="quto">
    <div>1 引言</div>
    <div>{{articleDetail.detail}}</div>
  </div>
 </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleDetail:""
    }
  },
  methods: {
    handleClick() {
      this.$router.back();
    },
  },
  mounted(){
    var {id} = this.$route.params;
    // console.log(id);
    this.$http(`http://122.112.161.135:4000/api/article/subject/${id}`).then(res=>{
    //   console.log(res.data.res[0]);
      this.articleDetail=res.data.res[0]
    })
  }
};
</script>

<style scoped>
.xcontain{
  color: gray;
  font-size: 30px;
}
.content{
  padding: 20px 40px;
}
.content>div{
  padding: 20px 0;
}
.header img{
  width: 60px;
  height: 60px;
  vertical-align: middle;
}

.icon{
  border-bottom: 1px solid rgb(218, 217, 217);
  position: relative;
  margin: 0 30px;
}
.icon img{
  width: 80px;
  height: 80px;
  margin-left: 30px;
  position: absolute;
  top: 5px;
  right: 0;
}
.icon img:nth-child(1){
  right: 100px;
}
.title{
  font-size: 37px;
  font-weight: 600;
  color: #60687d;
}
.img img{
  width: 100%;
  height: 400px;
}
.quto div:nth-child(1){
  margin: 40px 0;
}
.quto div:nth-child(2){
    font-size: 15px;
}
</style>